<template>
  <div class="log-list-wrap">
    <PageTop firstMenu="日志记录" secondMenu="账户列表" title="日志记录" :showAddBtn="false"></PageTop>
    <tableList :tableData="listData"></tableList>
   
     <div class="page-wrap">
      <el-pagination 
      class="page-count" 
      @current-change="getData" 
      background layout="total, prev, pager, next" 
      :total="totalCount" 
      :current-page.sync='page' 
      :page-size="15"></el-pagination>
    </div>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop, Component, Emit } from 'vue-property-decorator';
import PageTop from '@/components/pageTop.vue';
import tableList from '@/tables/logListTable.vue';
import AjaxResquest from '@/api/apiRequest';
@Component({
  components: {
    PageTop,
    tableList
  }
})
export default class LogList extends Vue {
  logRes!: AjaxResquest;
  listData: any[] = [];
  page: number = 1;
  pageSize: number = 15;
  totalCount: number = 0;
  ajaxData = {
    page: this.page,
    pageSize: this.pageSize
  };
  mounted() {
    // TODO
    this.logRes = new AjaxResquest('/system/log/loglist');
    this.getList();
  }
  getList(): void {
    this.logRes.getFunction(this.ajaxData).then((res:any) => {
      if (res.data.code === 1) {
        this.listData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
  pageChange(val: number): void {
    this.$set(this.ajaxData, 'page', val);
    this.logRes.getFunction(this.ajaxData).then((res:any) => {
      if (res.data.code === 1) {
        this.listData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
  getData() {
    this.logRes.getFunction();
  }
}
</script>
<style lang="less">
.log-list-wrap {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  .page-count-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0;
    margin-bottom: 15px;
  }
}
</style>
